<template>
  <div
    class="cursor-pointer"
    :class="{my_shadow_blue: active, 'text-grey-8': !active}"
    @mouseover="select()"
    @mouseleave="clear()"
  >
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'AmyShadow.vue',
  setup (props, context) {
    const active = ref(false);
    const select = () => {
      active.value = true;
    };

    const clear = () => {
      active.value = false;
    };

    return {
      active,
      select,
      clear
    };
  }
});
</script>

<style lang="scss" scoped>
.my_shadow_blue{
  color: $primary;
  box-shadow: 0 0 6px 0 #1890ff;
}
</style>
